<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        ul li{
            color: red;
        }

        ul > li{
            color: green;
        }

        .A + li{
            color: blue;
        }

        .A ~ li{
            font-size: 30px;
        }

        .B > li{
            color: orange;
        }
    </style>
</head>
<body>
    <!-- 
        1. 关联选择器, 关系选择器
            * 祖辈+后辈 关系
            * 兄弟关系
            
            公式中用s1,s2 代表任意一个基础选择器

            s1   s2{...} 匹配s1里面的所有后辈s2
            s1 > s2{...} 匹配s1里面的所有儿子s2
            s1 + s2{...} 匹配s1后面的一个兄弟s2
            s1 ~ s2{...} 匹配s1后面的所有兄弟s2
     -->

     <ul>
        <li>川菜</li>
        <ol>
            <li>麻辣豆腐</li>
            <li class="A">水煮白菜</li>
            <li>水煮牛肉</li>
            <li>毛血旺</li>
            <li>肉蟹煲</li>
        </ol>

        <li>粤菜</li>
        <ol class="B">
            <li>佛跳墙</li>
            <li>烧腊</li>
            <li>海鲜火锅</li>
        </ol>

        <li>江浙菜</li>
        <ol>
            <li>梅干菜</li>
            <li>梅菜扣肉</li>
            <li>糖醋排骨</li>
        </ol>
    </ul>
</body>
</html>